<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <button id="export" style="display: block">导出</button>
    <canvas id="drawing" width="200" height="200"
      >a drawing o something.</canvas
    >

    -------------------------------------------------------
    <br />

    <canvas id="drawing1" width="200" height="200"
      >a drawing o something.</canvas
    >

    -------------------------------------------------------
    <br />
    <canvas id="drawing3" width="200" height="200"
      >a drawing o something.</canvas
    >

    -------------------------------------------------------
    <br />

    <canvas id="drawing4" width="200" height="200"
      >a drawing o something.</canvas
    >

    -------------------------------------------------------
    <br />

    <img src="./test.jpg" id="img1" width="200" />
    <canvas id="drawing5" width="200" height="200"
      >a drawing o something.</canvas
    >

    -------------------------------------------------------
    <br />
    <canvas id="drawing6" width="200" height="200"
      >a drawing o something.</canvas
    >

    -------------------------------------------------------
    <br />
    <canvas id="drawing7" width="200" height="200"
      >a drawing o something.</canvas
    >

    -------------------------------------------------------
    <br />
    <canvas id="drawing8" width="200" height="200"
      >a drawing o something.</canvas
    >

    <script>
      {
        const drawing = document.querySelector('#drawing');

        // 使用toDataUrl方法导出canvas元素上的图像
        if (drawing.getContext) {
          document.querySelector('#export').addEventListener('click', () => {
            const imgURL = drawing.toDataURL('image/png');
            const image = document.createElement('img');
            image.src = imgURL;
            document.body.append(image);
          });
        }
      }
    </script>

    <!--2D绘图上下文-->
    <!--填充和描边-->
    <script>
      {
        const drawing = document.querySelector('#drawing');
        if (drawing.getContext) {
          const context = drawing.getContext('2d');

          // 绘制矩形相关的方法：fillRect(),strokeReact,clearReact
          // 绘制矩形相关的方法：fill 相关
          context.fillStyle = '#ff0000';
          context.fillRect(10, 10, 50, 50);
          context.fillStyle = 'rgba(0,0,355,0.5)';
          context.fillRect(30, 30, 50, 50);

          context.strokeStyle = '#ff0000';
          context.strokeRect(20, 20, 50, 50);
          context.strokeStyle = 'rgba(0,0,255,0.5)';
          context.fillRect(40, 40, 50, 50);
        }
      }
    </script>

    <!--绘制路径-->
    <!-- 通过路径可以绘制复杂的形状和线条。
    要绘制路径，必须首先调用beginPath()
    方法以表示开始绘制新路径 -->
    <script>
      {
        const drawing = document.querySelector('#drawing1');
        // 确保浏览器支持<canvas>
        const context = drawing.getContext('2d');
        // 创建路径
        context.beginPath();
        // 绘制外圆
        context.arc(100, 100, 99, 0, 2 * Math.PI, false);
        // 绘制内圆
        context.moveTo(194, 100);
        context.arc(100, 100, 94, 0, 2 * Math.PI, false);
        // 绘制分针
        context.moveTo(100, 100);
        context.lineTo(100, 15);
        // 绘制时针
        context.moveTo(100, 100);
        context.lineTo(35, 100);
        // 描画路径
        context.stroke();

        // 绘制文本
        {
          context.font = 'bold 14px Arial';
          context.textAlign = 'center';
          context.textBaseline = 'middle';
          context.fillText('12', 100, 20);
          // 与开头对齐
          context.textAlign = 'start';
          context.fillText('12', 100, 10);
          // 与末尾对齐
          context.textAlign = 'end';
          context.fillText('12', 100, 10);
        }
      }
    </script>

    <script>
      const context = document.querySelector('#drawing3').getContext('2d');

      // measureText
      let fontSize = 100;
      context.font = `${fontSize}px Arial`;

      while (context.measureText('Hello world!').width > 140) {
        fontSize--;
        context.font = `${fontSize}px Arial`;
        context.fillText('Hello  world!', 10, 10);
        context.fillText(`Font size is${fontSize}px`, 10, 50);
      }
    </script>

    <script>
      // measureText
      {
        const context = document.querySelector('#drawing3').getContext('2d');

        let fontSize = 100;
        context.font = `${fontSize}px Arial`;

        while (context.measureText('Hello world!').width > 140) {
          fontSize--;
          context.font = `${fontSize}px Arial`;
          context.fillText('Hello  world!', 10, 10);
          context.fillText(`Font size is${fontSize}px`, 10, 50);
        }
      }
    </script>

    <script>
      // 变换
      {
        const context = document.querySelector('#drawing4').getContext('2d');

        // 创建路径
        context.beginPath();
        // 绘制外圈
        context.arc(100, 100, 99, 0, 2 * Math.PI, false);
        // 绘制内圈
        context.moveTo(194, 100);
        context.arc(100, 100, 94, 0, 2 * Math.PI, false);
        // 移动原点到表盘中心
        context.translate(100, 100);
        // 旋转表针
        context.rotate(1);
        // 绘制分针
        context.moveTo(0, 0);
        context.lineTo(0, -85);
        // 描绘时针
        context.moveTo(0, 0);
        context.lineTo(-65, 0);
        // 描绘路径
        context.stroke();
      }
    </script>

    <!-- 绘制图像 drawImage -->
    <script>
      {
        const context = document.querySelector('#drawing5').getContext('2d');
        const image = document.querySelector('#img1');

        context.drawImage(image, 50, 10, 30, 30);
      }
    </script>

    <!-- 绘制阴影 shadowOffset -->
    <script>
      {
        const context = document.querySelector('#drawing6').getContext('2d');

        context.shadowOffsetX = 5;
        context.shadowOffsetY = 5;
        context.shadowBlur = 4;
        context.shadowColor = 'rgba(0,0,0,0.5)';

        context.fillStyle = '#ff0000';
        context.fillRect(10, 10, 50, 50);
        // 绘制蓝色矩形
        context.fillStyle = 'rgba(0,0,255,1)';
        context.fillRect(30, 30, 50, 50);
      }
    </script>

    <!-- 渐变 -->
    <script>
      {
        const context = document.querySelector('#drawing7').getContext('2d');
        const gradient = context.createLinearGradient(30, 30, 70, 70);
        gradient.addColorStop(0, 'white');
        gradient.addColorStop(1, 'black');

        // 绘制红色矩形
        context.fillStyle = '#ff0000';
        context.fillRect(10, 10, 50, 50);

        // 绘制渐变矩形
        context.fillStyle = gradient;
        context.fillRect(30, 30, 50, 50);
      }
    </script>

    <!-- 图案 -->
    <script>
      {
        const image = document.querySelector('#img1');
        const context = document.querySelector('#drawing7').getContext('2d');
        const pattern = context.createPattern(image, 'repeat');
        // 绘制矩形
        context.fillStyle = pattern;
        context.fillRect(10, 10, 150, 150);
      }
    </script>

    <!-- 图像数据 -->
    <script>
      const context = document.querySelector('#drawing7').getContext('2d');
      const imageData = context.getImageData(10, 5, 50, 50);
    </script>

    <!-- 合成 -->
    <script>
      {
        const context = document.querySelector('#drawing8').getContext('2d');
        context.fillStyle = '#ff0000';
        context.fillRect(10, 10, 50, 50);

        context.globalCompositeOperation = 'destination-over';
        context.fillStyle = 'rgba(0,0,255,1)';
        context.fillRect(30, 30, 50, 50);
      }
    </script>
  </body>
</html>
